<template>
  <div class="nav_bar">
        <router-link to="/index/home" active-class="active">首页</router-link>
        <!-- 如果定义了命名路由，除了path以外，可以通过name属性进行跳转 -->
        <router-link :to="{name:'分类列表'}" active-class="active">分类</router-link>
        <router-link to="/index/shop" active-class="active">购物车</router-link>
        <router-link to="/index/mine" active-class="active">我的</router-link>
     </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.nav_bar{
    width: 100vw;
    height:1rem;
    background:#fff;
    border-top:1px solid #ccc;
    position: fixed;
    bottom:0;
    display: flex;
}
.nav_bar a{
    flex: 1;
    text-align: center;
    font:.2rem/1rem "微软雅黑";
}
.nav_bar .active{
    background: teal;
    color:#fff
}
</style>